<template>
  <div ref="waveformChart" style="height: 460px;"></div>
</template>

<script setup name="WaveformChart">
import { ref, reactive } from 'vue'
import * as echarts from "echarts"

// 获取节点
let waveformChart = ref();

onMounted(() => {
  //获取echarts实例
  const myCharts = echarts.init(waveformChart.value);
  myCharts.setOption({
    backgroundColor: "#ffffff",
    tooltip: {
      trigger: 'xAxis', // 若需要使用默认的『显示』『隐藏』触发规则，则可以去掉trigger的配置
      axisPointer: { type: 'cross', show: true },
      formatter: '{a}{b}{c}' // 默认触发规则中散点展示的内容，{a}标题;{b}X坐标;{c}Y坐标
    },
    legend: {
      data: [{ name: 'change of report number', textStyle: { color: "#2A77AC" } },],
      orient: 'vertical',
      top: "85px",
      right: '14%',
      borderWidth: 2,
      textStyle: {
        fontSize: '25px',
        fontWeight: 700
      },
    },
    grid: {
      show: true,
      left: 200,
      bottom: 100,
      borderColor: "black",
      borderWidth: 3
    },
    xAxis: [
      {
        name: 'Date',
        nameGap: 30,  // y轴name与横纵坐标轴线的间距
        nameLocation: "middle", // y轴name处于y轴的什么位置
        nameTextStyle: {
          "fontSize": 25,
          "fontWeight": 700
        },
        max: 370,
        splitLine: {
          show: false //去掉网格线
        },
        type: 'category',
        axisLabel: {
          interval: 30,
          show: true,
          textStyle: {
            color: '#000000',
            "fontSize": 18
          },
        },
        axisLine: {
          show: true
        }
      }
    ],
    yAxis: [
      {
        splitLine: {
          show: false //去掉网格线
        },
        type: 'value',
        name: 'number of change',
        nameGap: 80,  // y轴name与横纵坐标轴线的间距
        nameLocation: "middle", // y轴name处于y轴的什么位置
        "nameTextStyle": {
          "fontSize": 25,
          "fontWeight": 700
        },
        max: 90000,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#',
            "fontSize": 18
          },
        },
        axisLine: {
          show: true
        }
      },
    ],
    series: [
      {
        name: 'change of report number',
        "nameTextStyle": { "fontSize": 25 },
        type: 'line',
        data: [0,
          80630.0,
          20873.0,
          -10026.0,
          15657.0,
          46746.0,
          -16294.0,
          -4860.0,
          36758.0,
          36396.0,
          3729.0,
          12588.0,
          -1247.0,
          59672.0,
          -36658.0,
          29763.0,
          -32238.0,
          28440.0,
          -11891.0,
          18366.0,
          25944.0,
          29496.0,
          -34876.0,
          16252.0,
          -18533.0,
          46627.0,
          10349.0,
          10245.0,
          -3732.0,
          1503.0,
          -39981.0,
          -8680.0,
          -22790.0,
          48008.0,
          -30864.0,
          -542.0,
          -26004.0,
          -8941.0,
          7586.0,
          -15950.0,
          26315.0,
          1885.0,
          52282.0,
          -76765.0,
          17089.0,
          -9021.0,
          5425.0,
          27625.0,
          -28780.0,
          -26902.0,
          5233.0,
          -7544.0,
          2050.0,
          681.0,
          -10957.0,
          17167.0,
          -17286.0,
          -36288.0,
          26165.0,
          -11300.0,
          0.0,
          -11122.0,
          -5674.0,
          7085.0,
          17465.0,
          -34300.0,
          -12613.0,
          5970.0,
          17449.0,
          15001.0,
          -48785.0,
          10759.0,
          -23519.0,
          -1324.0,
          18649.0,
          -13475.0,
          -3376.0,
          12281.0,
          -18869.0,
          -690.0,
          15961.0,
          8228.0,
          -24626.0,
          9069.0,
          -22920.0,
          9429.0,
          10431.0,
          -30547.0,
          5119.0,
          -8295.0,
          -3500.0,
          -95.0,
          23397.0,
          -6948.0,
          -7969.0,
          -16413.0,
          5079.0,
          8348.0,
          -9807.0,
          16543.0,
          -22004.0,
          -1306.0,
          5702.0,
          -3484.0,
          -6892.0,
          -4052.0,
          21277.0,
          -23670.0,
          1890.0,
          -5904.0,
          11605.0,
          -4186.0,
          -9993.0,
          17678.0,
          -28661.0,
          -333.0,
          17985.0,
          -9826.0,
          21933.0,
          -21771.0,
          -9687.0,
          -1834.0,
          -1940.0,
          16414.0,
          -14520.0,
          5034.0,
          -3773.0,
          1912.0,
          -4360.0,
          -6110.0,
          1234.0,
          2373.0,
          3211.0,
          -3013.0,
          -1036.0,
          -3070.0,
          1095.0,
          -1478.0,
          -3051.0,
          -657.0,
          465.0,
          658.0,
          -3777.0,
          -3230.0,
          4130.0,
          1799.0,
          473.0,
          -1963.0,
          4153.0,
          -7168.0,
          -1525.0,
          1740.0,
          513.0,
          2035.0,
          -1006.0,
          -4644.0,
          -3418.0,
          4726.0,
          -2882.0,
          6166.0,
          -3979.0,
          -2559.0,
          1235.0,
          -7460.0,
          8154.0,
          -4875.0,
          2858.0,
          -5697.0,
          5466.0,
          -2494.0,
          -4528.0,
          4361.0,
          -2464.0,
          -674.0,
          -1667.0,
          -1433.0,
          3036.0,
          -5483.0,
          -1279.0,
          2159.0,
          1933.0,
          2766.0,
          -3937.0,
          -601.0,
          4288.0,
          -5309.0,
          -1240.0,
          6365.0,
          -664.0,
          -5697.0,
          -1315.0,
          -465.0,
          842.0,
          2963.0,
          -2907.0,
          2570.0,
          -3151.0,
          4013.0,
          -6330.0,
          3044.0,
          -585.0,
          -57.0,
          -787.0,
          2266.0,
          -2859.0,
          -438.0,
          1897.0,
          -2588.0,
          -1753.0,
          3472.0,
          -1152.0,
          121.0,
          1491.0,
          -2618.0,
          -707.0,
          707.0,
          1431.0,
          -353.0,
          -3103.0,
          1078.0,
          -3624.0,
          3724.0,
          -271.0,
          710.0,
          -877.0,
          -973.0,
          4280.0,
          -2628.0,
          271.0,
          -2339.0,
          151.0,
          3037.0,
          -2021.0,
          -3475.0,
          -1027.0,
          4067.0,
          -621.0,
          1683.0,
          -3440.0,
          3821.0,
          -4533.0,
          827.0,
          715.0,
          1.0,
          -1742.0,
          970.0,
          210.0,
          -2935.0,
          -1350.0,
          1260.0,
          350.0,
          2645.0,
          1202.0,
          3965.0,
          -3891.0,
          -316.0,
          1948.0,
          -3773.0,
          699.0,
          2479.0,
          -2946.0,
          1268.0,
          -3783.0,
          2712.0,
          -721.0,
          370.0,
          -878.0,
          746.0,
          -3021.0,
          1886.0,
          2200.0,
          -274.0,
          -1079.0,
          1587.0,
          -3496.0,
          -2121.0,
          1503.0,
          -1530.0,
          1697.0,
          576.0,
          -1954.0,
          1709.0,
          1497.0,
          56.0,
          810.0,
          -2657.0,
          -290.0,
          419.0,
          -104.0,
          447.0,
          195.0,
          -332.0,
          6.0,
          1110.0,
          -2454.0,
          296.0,
          -2749.0,
          -484.0,
          1826.0,
          1004.0,
          168.0,
          1884.0,
          -2224.0,
          2413.0,
          1325.0,
          -4972.0,
          1117.0,
          1771.0,
          -1517.0,
          -1474.0,
          -1333.0,
          425.0,
          1451.0,
          939.0,
          -1899.0,
          1889.0,
          1743.0,
          -4459.0,
          242.0,
          -703.0,
          3149.0,
          -774.0,
          1042.0,
          -3508.0,
          2184.0,
          -1175.0,
          845.0,
          -2312.0,
          -21170.0,
          20059.0,
          2018.0,
          -773.0,
          1704.0,
          -2424.0,
          356.0,
          1390.0,
          -3700.0,
          2441.0,
          -2483.0,
          790.0,
          926.0,
          1228.0,
          -3277.0,
          1352.0,
          677.0,
          -517.0,
          -170.0,
          3844.0,
          -1873.0,
          -1957.0,
          -1690.0,
          1447.0,
          -1656.0,
          -4727.0,
          4457.0,
          868.0,
          -719.0,
          -159.0,
          1203.0,
        ],
        markLine: {
          symbol: "none",//去掉警戒线最后面的箭头
          label: { position: "end" },//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
          data: [
            {
              name: 'x',
              yAxis: -5400,
              silent: true,             //鼠标悬停事件  true没有，false有
              lineStyle: {               //警戒线的样式  ，虚实  颜色
                type: "solid",
                color: "#D75615"
              },
              label: {
                show: true,
                textStyle: {
                  fontSize: "25px",
                  color: "#D75615"
                }
              },
            }, {
              name: 'x',
              yAxis: 5400,
              silent: true,             //鼠标悬停事件  true没有，false有
              lineStyle: {               //警戒线的样式  ，虚实  颜色
                type: "solid",
                color: "#D75615"
              },
              label: {
                show: true,
                textStyle: {
                  fontSize: "25px",
                  color: "#D75615",
                  formatter: " {value}"
                }
              },
            },
          ]
        },
        color: '#2A77AC'
      }
    ]
  })
})
</script>